<template>
  <div>
    <el-table
      :data="data.tableData"
      tooltip-effect="dark"
      :header-cell-style="{background:'#F5F7FA'}"
      style="width: 100%"
      @selection-change="thatSelection"
    >
      <!--多选 checkbox -->
      <el-table-column
        v-if="data.tableConfig.selection"
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <template v-for="item in data.tableConfig.tHead">
        <!-- v-slot -->
        <el-table-column
          v-if="item.columnType === 'slot'"
          :key="item.field"
          :prop="item.field"
          :label="item.label"
          :width="item.width"
          :align="item.align"
        >
          <template slot-scope="scope">
            <slot :name="item.slotName" :data="scope.row"></slot>
          </template>
        </el-table-column>
        <!-- 文本渲染 -->
        <el-table-column
          v-else
          :key="item.field"
          :prop="item.field"
          :label="item.label"
          :width="item.width"
          :align="item.align"
        ></el-table-column>
      </template>
    </el-table>

    <div class="padding_top_30">
      <el-row>
        <el-col :span="4">
          <slot name="batch"></slot>
        </el-col>
        <el-col :span="20">
          <el-pagination
            class="pull_right"
            v-if="data.tableConfig.paginationShow"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageData.currentPage"
            :page-sizes="pageData.pageSizes"
            :page-size="pageData.pageSize"
            :pager-count="pageData.pageCount"
            :layout="data.tableConfig.paginationLayout"
            :total="pageData.total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onBeforeMount, onMounted, watch } from "@vue/composition-api";
import { tableLoadData } from "./tableLoadData";
import { pagination } from "./pagination";

export default {
  name: "tableVue",
  props: {
    config: {
      type: Object,
      default: () => {
      }
    },
    tableRow: {
      type: Object,
      default: () => {
      }
    }
  },
  setup(props, { emit }) {
    // 加载数据
    const { tableJson, LoadData } = tableLoadData();
    // 分页组件
    const { pageData, handleSizeChange, handleCurrentChange, currentPage, handlerTotalCount } = pagination();
    /**
     * data
     */
    const data = reactive({
      tableConfig: {
        selection: true,
        tHead: [],
        requestData: {},
        paginationShow: true,
        paginationLayout: "total, sizes, prev, pager, next, jumper"
      },
      tableData: []
    });

    /**
     * methos 方法
     */
      // 初始化table 的配置项 // const 生命对象 或者 数组
      // 匹配相同的key，如果存在，则替换
    const initTableConfig = () => {
        let configData = props.config;
        let keys = Object.keys(data.tableConfig);
        for (let key in configData) {
          if (keys.includes(key)) {
            data.tableConfig[key] = configData[key];
          }
        }
      };
    // 勾选checkbox 时触发
    const thatSelection = (val) => {
      const selectData = {
        id: val.map(item => item.id)
      };
      emit("update:tableRow", selectData);
    };
    // 刷新数据
    const refreshData = () => {
      LoadData(data.tableConfig.requestData);
    };
    // 带数据刷新数据
    const paramsRefresh = (params) => {
      let requestData = Object.assign({}, params, {
        pageNumber: 1,
        pageSize: 10
      });
      data.tableConfig.requestData.data = requestData;
      LoadData(data.tableConfig.requestData);
    };
    /**
     * watch 监听
     */
    // 监听一个写法
    // watch(() => tableJson.item, (value) => data.tableData = value);

    // 监听两个及以上写法
    watch([
      () => tableJson.item,
      () => tableJson.total
    ], ([tableJson, tabTotal]) => {
      data.tableData = tableJson;
      // 更新total
      handlerTotalCount(tabTotal);
    });
    // 监听页码
    watch([
      () => pageData.currentPage,
      () => pageData.pageSize
    ], ([currentPage, pageSize]) => {
      let requestData = data.tableConfig.requestData;
      if (requestData.data) {
        requestData.data.pageNumber = currentPage;
        requestData.data.pageSize = pageSize;
        // 加载对应的数据
        LoadData(requestData);
      }
    });
    /**
     * 生命周期
     */
    onBeforeMount(() => {
      initTableConfig();
      LoadData(data.tableConfig.requestData);
    });

    return {
      data, pageData,
      handleSizeChange, handleCurrentChange, thatSelection, refreshData, paramsRefresh
    };
  }
};
</script>

<style scoped></style>
<!--
初始化的数据，不需要监听，
可以在挂载之前预先处理。

组件三要素
prop：用于定义组件的属性（组件属性参数）
event：自定义事件用语触发组件的事件（经常会回调父组件的方法）
slot：用于组件的功能扩展。（插槽），父组件的内容传入子组件，在子组件中显示

v-slot 插槽： 父组件传内容到子组件显示
1. 匿名插槽：没有指定某一个插槽，全部都显示
2. 具名插槽：指定插槽显示内容
3. 作用域插槽：可以进行数据绑定，父子组件通讯
-->
